<template>
  <div class="dialog">
    <ul>
      <!-- 遍历会话列表 -->
        <router-link @click="checkZero(s.id)" v-for="s in wsStore.sessionList"  active-class="active" :to="{name:'chatpage',query: { sessionId:s.id,messageIdList:s.messageIdList }}" >
          <li :class="{ 'selected': isSelected(s.id) }"><!-- 判断高亮与否 -->
            <div class="session-item">
              <el-image :src="s.avatarUrl" class="avatar"></el-image>
              <div class="session-info">
                <div class="session-name">{{ s.name }}</div><!-- {{ s.lastMessage.content }} -->
                <div class="last-message" v-if="wsStore.wsLastMessage[s.id] && wsStore.wsLastMessage[s.id].content">{{ wsStore.wsLastMessage[s.id].content }}</div>
                <div class="last-message" v-else-if="s.lastMessage && s.lastMessage.content">{{ s.lastMessage.content }}</div>
              </div>
              <div class="redDot" v-show="wsStore.unreadCountMap[s.id]==0||isSelected(s.id)?false:true">{{ wsStore.unreadCountMap[s.id] }}</div>
            </div>
          </li>
        </router-link>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { useWebSocketStore } from '@/stores/websocket'
import axios from 'axios'
import { reactive, ref } from 'vue'
const wsStore = useWebSocketStore()
let selectedSessionId = ref<number | null>(null)

// 获取会话列表
async function getsessionList() {
  const sessionListAxios = await axios({
    url:'/api/session/getSessionList',
  })
  // 清空并重新设置会话列表，确保响应式更新
  wsStore.sessionList.length = 0
  sessionListAxios.data.data.forEach((session: any) => {
    wsStore.sessionList.push({ ...session })
  })
  // 正确更新未读消息数映射，保留现有的未读计数状态
  wsStore.sessionList.forEach(s => {
    // 如果当前会话已经有未读计数，则保留较大的值（避免覆盖新消息）
    if (wsStore.unreadCountMap[s.id] === undefined || wsStore.unreadCountMap[s.id] < s.uncheckNum) {
      wsStore.unreadCountMap[s.id] = s.uncheckNum
    }
  })
}
getsessionList()//默认展示组件执行


// 点击回话将该会话的未读置为零，并将总未读更新
async function checkZero(sessionId:number){
  wsStore.sessionId = sessionId
  wsStore.unCheckNum -= wsStore.unreadCountMap[sessionId]
  wsStore.unreadCountMap[sessionId] = 0
  selectedSessionId.value = sessionId
  await axios({
      url:'/api/message/setUncheckNumZero',
      method:'post',
      params: {
        sessionId: sessionId
      }
  })
}

// 检查是否选中
function isSelected(sessionId: number): boolean {
  return selectedSessionId.value === sessionId
}
</script>

<style scoped>
/* 食谱网站色调样式 - 微信会话列表风格 */
.dialog{
    margin-left: 100px;
}
.dialog ul li{
  position: relative;
  height: 80px;
  border-bottom: 1px solid #E8D5B7;
  padding: 15px 20px;
  transition: all 0.3s ease;
  background: linear-gradient(135deg, #FFFFFF 0%, #FDF8F2 100%);
}
.dialog ul li:hover{
  cursor: pointer;
  background: linear-gradient(135deg, #FFF3E0 0%, #FFECB3 100%);
  transform: translateX(5px);
  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.1);
  border-left: 4px solid #FF9800;
}
.dialog ul li.active {
  background: linear-gradient(135deg, #FFECB3 0%, #FFE082 100%);
  border-left: 4px solid #FF5722;
  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.2);
}

/* 微信风格会话列表布局 */
.session-item {
  display: flex;
  align-items: center;
  height: 100%;
  position: relative;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid #FFB74D;
  box-shadow: 0 2px 8px rgba(255, 183, 77, 0.3);
  flex-shrink: 0;
}

.session-info {
  flex: 1;
  margin-left: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.session-name {
  font-size: 18px;
  font-weight: 600;
  color: #5D4037;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.last-message {
  font-size: 14px;
  color: #8D6E63;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.8;
}

.redDot{
  z-index: 100;
  position: absolute;
  top: 20px;
  right: 15px;
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, #FF5722 0%, #FF8A65 100%);
  border-radius: 50%;
  color: white;
  line-height: 20px;
  text-align: center;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(255, 87, 34, 0.3);
  font-size: 12px;
}

/* 选中状态样式 */
.dialog ul li.selected {
  background: linear-gradient(135deg, #FFECB3 0%, #FFE082 100%);
  border-left: 4px solid #FF5722;
  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.2);
  transform: translateX(2px);
}
</style>
